broadway: Use css transforms

This allows generic transforms nodes to work.

diff --git a/gdk/broadway/broadway-protocol.h b/gdk/broadway/broadway-protocol.h
index 70c5c18522418776953e8b92edff653d2965ac11..4f7b812e66d0a27066848c626a194bd53c754b1c 100644 (file)
--- a/gdk/broadway/broadway-protocol.h
+++ b/gdk/broadway/broadway-protocol.h
@@ -22,7 +22,7 @@ typedef enum { /* Sync changes with broadway.js */
   BROADWAY_NODE_CLIP = 10,
   BROADWAY_NODE_KEEP_ALL = 11,
   BROADWAY_NODE_KEEP_THIS = 12,
-  BROADWAY_NODE_TRANSLATE = 13,
+  BROADWAY_NODE_TRANSFORM = 13,
   BROADWAY_NODE_DEBUG = 14,
   BROADWAY_NODE_REUSE = 15,
 } BroadwayNodeType;

diff --git a/gdk/broadway/broadway-server.c b/gdk/broadway/broadway-server.c
index ac9c424cf9604c65b568366290539a1e07fd92ac..70a236ef46363cedeb7094e179f196571de18b41 100644 (file)
--- a/gdk/broadway/broadway-server.c
+++ b/gdk/broadway/broadway-server.c
@@ -1642,6 +1642,7 @@ broadway_server_has_client (BroadwayServer *server)
 #define NODE_SIZE_COLOR 1
 #define NODE_SIZE_FLOAT 1
 #define NODE_SIZE_POINT 2
+#define NODE_SIZE_MATRIX 16
 #define NODE_SIZE_SIZE 2
 #define NODE_SIZE_RECT (NODE_SIZE_POINT + NODE_SIZE_SIZE)
 #define NODE_SIZE_RRECT (NODE_SIZE_RECT + 4 * NODE_SIZE_SIZE)
@@ -1670,6 +1671,7 @@ decode_nodes (BroadwayServer *server,
   guint32 size, n_children;
   gint32 texture_offset;
   guint32 hash;
+  guint32 transform_type;
 
   g_assert (*pos < len);
 
@@ -1711,8 +1713,16 @@ decode_nodes (BroadwayServer *server,
     size = NODE_SIZE_RECT;
     n_children = 1;
     break;
-  case BROADWAY_NODE_TRANSLATE:
-    size = NODE_SIZE_POINT;
+  case BROADWAY_NODE_TRANSFORM:
+    transform_type = data[(*pos)];
+    size = 1;
+    if (transform_type == 0) {
+      size += NODE_SIZE_POINT;
+    } else if (transform_type == 1) {
+      size += NODE_SIZE_MATRIX;
+    } else {
+      g_assert_not_reached();
+    }
     n_children = 1;
     break;
   case BROADWAY_NODE_LINEAR_GRADIENT:

diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js
index c6e537c9093de8487527a644a7110bedcea1e43a..ae3d912ea65b0141f1015f4d21a8bc5f3e31eba1 100644 (file)
--- a/gdk/broadway/broadway.js
+++ b/gdk/broadway/broadway.js
@@ -13,7 +13,7 @@ const BROADWAY_NODE_OPACITY = 9;
 const BROADWAY_NODE_CLIP = 10;
 const BROADWAY_NODE_KEEP_ALL = 11;
 const BROADWAY_NODE_KEEP_THIS = 12;
-const BROADWAY_NODE_TRANSLATE = 13;
+const BROADWAY_NODE_TRANSFORM = 13;
 const BROADWAY_NODE_DEBUG = 14;
 const BROADWAY_NODE_REUSE = 15;
 
@@ -630,12 +630,32 @@ TransformNodes.prototype.insertNode = function(parent, posInParent, oldNode)
 
     /* Bin nodes */
 
-    case BROADWAY_NODE_TRANSLATE:
+    case BROADWAY_NODE_TRANSFORM:
         {
-            var point = this.decode_point();
+            var transform_type = this.decode_uint32();
+            var transform_string;
+
+            if (transform_type == 0) {
+                var point = this.decode_point();
+                transform_string = "translate(" + px(point.x) + "," + px(point.y) + ")";
+            } else if (transform_type == 1) {
+                var m = new Array();
+                for (var i = 0; i < 16; i++) {
+                    m[i] = this.decode_float ();
+                }
+
+                transform_string =
+                    "matrix3d(" +
+                    m[0] + "," + m[1] + "," + m[2] + "," + m[3]+ "," +
+                    m[4] + "," + m[5] + "," + m[6] + "," + m[7] + "," +
+                    m[8] + "," + m[9] + "," + m[10] + "," + m[11] + "," +
+                    m[12] + "," + m[13] + "," + m[14] + "," + m[15] + ")";
+            }
+
             var div = document.createElement('div');
-            div.style["position"] = "absolute";
-            set_point_style(div, point);
+            div.style["transform"] = transform_string;
+            div.style["transform-origin"] = "0px 0px";
+
             this.insertNode(div, -1, oldChildren[0]);
             newNode = div;
         }

diff --git a/gsk/gskbroadwayrenderer.c b/gsk/gskbroadwayrenderer.c
index 0730ca8a730fec9b1cc4e7decb5155c4884b8660..e8cf1fe3471a0999f3df20341c61c2ac3f97d673 100644 (file)
--- a/gsk/gskbroadwayrenderer.c
+++ b/gsk/gskbroadwayrenderer.c
@@ -155,6 +155,17 @@ add_rounded_rect (GArray *nodes, const GskRoundedRect *rrect, float offset_x, fl
     add_size (nodes, &rrect->corner[i]);
 }
 
+static void
+add_matrix (GArray *nodes, graphene_matrix_t *matrix)
+{
+  float matrix_floats[16];
+  int i;
+
+  graphene_matrix_to_float (matrix, matrix_floats);
+  for (i = 0; i < 16; i++)
+    add_float (nodes, matrix_floats[i]);
+}
+
 static void
 add_color_stop (GArray *nodes, const GskColorStop *stop)
 {
@@ -508,23 +519,30 @@ gsk_broadway_renderer_add_node (GskRenderer *renderer,
         GskTransform *transform = gsk_transform_node_get_transform (node);
         GskTransformCategory category = gsk_transform_get_category (transform);
 
-        if (category >= GSK_TRANSFORM_CATEGORY_2D_TRANSLATE)
-          {
-            if (add_new_node (renderer, node, BROADWAY_NODE_TRANSLATE)) {
+        if (add_new_node (renderer, node, BROADWAY_NODE_TRANSFORM)) {
+          if (category >= GSK_TRANSFORM_CATEGORY_2D_TRANSLATE)
+            {
               float dx, dy;
               gsk_transform_to_translate (transform, &dx, &dy);
 
-              add_xy (nodes, dx, dy, offset_x, offset_y);
+              add_uint32 (nodes, 0); // Translate
+              add_xy (nodes, dx, dy, 0, 0);
               gsk_broadway_renderer_add_node (renderer,
                                               gsk_transform_node_get_child (node),
                                               0, 0);
             }
-          }
-        else
-          {
-            /* Fallback to texture for now */
-            break;
-          }
+          else
+            {
+              graphene_matrix_t matrix;
+
+              gsk_transform_to_matrix (transform, &matrix);
+              add_uint32 (nodes, 1); // General transform
+              add_matrix (nodes, &matrix);
+              gsk_broadway_renderer_add_node (renderer,
+                                              gsk_transform_node_get_child (node),
+                                              0, 0);
+            }
+        }
       }
       return;